<template>
  <div class="search-box">
    <div class="search-input">
      <div class="select">
        <el-dropdown @command="searchType">
          <div class="value">
            {{ type == "goods" ? "商品搜索" : "店铺搜索"
            }}<i class="el-icon-caret-bottom"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="goods" :disabled="type == 'goods'"
              >商品搜索</el-dropdown-item
            >
            <el-dropdown-item command="shops" :disabled="type == 'shops'"
              >店铺搜索</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="input">
        <input
          @keydown="inputKeydown"
          type="text"
          v-model="search"
          placeholder="请输入搜索内容"
        />
      </div>
      <div class="button" @click="searchHandle">
        <icon name="iconsousuo" size="14" />
      </div>
    </div>
    <div class="search-value">
      <div
        class="item"
        @click="toSearch(item)"
        v-for="(item, index) in search_value"
        :key="index"
      >
        {{ item.language }}
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api";
export default {
  data() {
    return {
      type: "goods",
      search: "",
      search_value: [],
    };
  },
  watch: {
    "$route.query": function () {
      this.search = this.$route.query.search || "";
    },
  },
  created() {
    this.getHistortSearch();
    this.search = this.$route.query.search || "";
  },
  methods: {
    getHistortSearch() {
      api.HISTORY_SEARCH().then((res) => {
        this.search_value = res.splice(0, 5);
      });
    },
    inputKeydown(event) {
      if (event.keyCode == 13) {
        this.searchHandle();
      }
    },
    toSearch(item) {
      this.search = item.language;
      this.searchHandle();
    },
    searchType(type) {
      this.type = type;
    },
    searchHandle() {
      if (this.search == "") return this.$message.info("请输入关键字");
      if (this.type === "goods") {
        this.$router.push({
          path: "/goods/search",
          query: Object.assign({}, this.$route.query, {
            search: this.search,
            time: Date.now(),
          }),
        });
      } else {
        this.$router.push({
          path: "/shop/search",
          query: { search: this.search, time: Date.now() },
        });
      }
      setTimeout(this.getHistortSearch, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.search-box {
  margin: 0 auto;
  .search-input {
    height: 35px;
    padding: 0 0 0 20px;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #d52c1a;
    display: flex;
    align-items: center;
    .select {
      display: inline-block;
      .value {
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        cursor: pointer;
        i {
          color: #c2c2c2;
          padding-left: 12px;
        }
      }
    }
    .input {
      width: 323px;
      flex: 1;
      padding: 0 9px;
      input {
        padding: 0;
        font-size: 16px;
        width: 100%;
        border: none;
        outline: none;
        color: #333;
        &::placeholder {
          color: #999999;
        }
      }
    }
    .button {
      cursor: pointer;
      width: 46px;
      height: 100%;
      background: #d52c1a;
      color: #fff;
      border-radius: 0 15px 15px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      &:active {
        opacity: 0.8;
      }
    }
  }
  .search-value {
    margin-top: 10px;
    padding: 0 20px;
    display: flex;
    font-size: 12px;
    font-weight: 400;
    color: #999999;
    line-height: 17px;
    .item {
      margin-right: 12px;
      cursor: pointer;
    }
  }
}
</style>
